<template>
  <div class="stock-manage">

      <el-row :gutter="16" style="line-height:40px">
      
        <!-- <el-col :xs="5" :sm="3" :md="3" :lg="2" :xl="2">
            <div class="label-wrap category">
              <label for="">装备名称：</label>
            </div>
        </el-col>
        <el-col :xs="6" :sm="5" :md="5" :lg="3" :xl="3" style="margin-left:-25px">
            <el-input v-model="prod_name" size="small" placeholder="请输入装备名称"></el-input>
        </el-col>

        <el-col :xs="5" :sm="3" :md="3" :lg="2" :xl="2">
            <div class="label-wrap category">
              <label for="">装备编号：</label>
            </div>
        </el-col>
        <el-col :xs="6" :sm="5" :md="5" :lg="3" :xl="3" style="margin-left:-25px">
            <el-input v-model="prod_code" size="small" placeholder="请输入产品编号"></el-input>
        </el-col>

        <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="1">
            <div class="label-wrap category">
              <label for="">库区：</label>
            </div>
        </el-col>
        <el-col :xs="6" :sm="5" :md="4" :lg="3" :xl="3">
            <el-select v-model="select_area" @change="choseArea" placeholder="请选择" size="small">
              <el-option
                v-for="item in areaList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId">
              </el-option>
            </el-select>
        </el-col>

          <el-col :xs="2" :sm="2" :md="2" :lg="1" :xl="1">
            <div class="label-wrap category">
              <label for="">库位：</label>
            </div>
          </el-col>
          <el-col :xs="6" :sm="5" :md="4" :lg="3" :xl="3">
            <el-select v-model="select_depart" placeholder="请先选择库区" size="small">
              <el-option
                v-for="item in departlist"
                :key="item.departmentId"
                :label="item.departmentCode"
                :value="item.departmentId">
              </el-option>
            </el-select>
          </el-col>

          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button type="primary" size="mini" icon="el-icon-search" style="width:80px" @click="searchProd">搜索</el-button>
          </el-col>

          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button size="mini" icon="el-icon-download" @click="outStockList" type="primary">导出库存清单</el-button>
          </el-col> -->

          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <div style="font-size:18px;font-weight:700;color:#333">预警装备信息</div>
          </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="stockProds" border style="width: 100%" @selection-change="selectStock" v-loading="warningLoading">
            <!-- <el-table-column type="selection" width="40"></el-table-column> -->
            <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="categoryTwoName" label="装备细类" width="120"></el-table-column>
            <el-table-column prop="prodCode" label="装备编号" width="120"></el-table-column>
            <el-table-column prop="prodName" label="装备名称" width="120"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
            <el-table-column prop="emit" label="单位"></el-table-column>
            <el-table-column prop="prodStocknum" label="库存数"></el-table-column>  
            <el-table-column prop="prodAwaitnum" label="待出库"></el-table-column>
            <el-table-column prop="prodResiduenum" label="可出数"></el-table-column>
            <el-table-column prop="areaName" label="库区"></el-table-column>
            <el-table-column prop="departmentCode" label="库位"></el-table-column>
            <el-table-column prop="prodDate" label="到期时间"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

      <freezeprod :openFreezeDialog.sync="openFreezeDialog"></freezeprod>
      <excel style="display:none" :excelname="excelname" 
        :outPutKey="outputKey" :tableData="stockProds" 
        :trueOutExecl.sync="trueOutExecl">
      </excel>
  </div>
</template>

<script>
import { GetDateWarning, GetStockInfoPage, SearchStockInfo } from '@/api/outstore';
import { getStore } from '@/utils/app.js';
import { FindStoreArea, FindAreaDepart} from '@/api/store.js'
import freezeprod from './freezeprod';
import excel from '../test/excel';

export default {
  name: 'addallot',
  components: {
    freezeprod,
    excel
  },
  data() {
    return {
        warningLoading: true,
        trueOutExecl: false,  // 确认是否导出
        outputKey: [], // 导出表格title
        excelname: '库存详情',
        openFreezeDialog: false, // 打开选择商品弹框
        is_search: false,
        // 盘点单数据
        prod_name: '',
        prod_code: '',
        select_area: '',
        select_depart: '',
        areaList: [],
        departlist: [],
        // 盘点选择的装备
        stockProds: [],
        selectedProd: [],
         // 分页
        pageNum: 1,
        pageSize: 8,
        total_num: null,
    }
    
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
  },
  mounted() {
    this.getStoreArea();
    this.getStockProd()
  },
  methods:{
    // 导出表格
    outStockList() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodCode: '装备编号',
            prodName: '装备名称',
            prodSpecial: '规格',
            prodStocknum: '库存数',
            emit: '单位',
            prodPrice: '价格',
            areaName: '库区',
            departmentCode: '库位',
            prodDate: '到期时间'
      }]
    },
    // 根据仓库id获取所有库存信息
    getStockProd() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetDateWarning(reqData).then( res => {
        let data = res.data.info;
        this.stockProds = data.list;
        this.stockProds.forEach( e => e.prodDate = this.formatDate(e.prodDate))
        this.total_num = data.total;
        this.warningLoading = false;
      }).catch( error => console.log(error))
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getStockProd()
    },
    // 获取页面仓库和库区
    getStoreArea() {
      FindStoreArea(this.storeid).then( res => {
          this.areaList = res.data;
      })
    },
    // 选择库区显示库位
    choseArea(val) {
      // 根据库区id加载库位数据
      FindAreaDepart(val).then( res => {
        this.departlist = res.data;
      })
    },
    // 搜索库存装备
    searchProd() {
      let reqData = {
        prodName: this.prod_name,
        prodCode: this.prod_code,
        prodArea: this.select_area,
        prodDepart: this.select_depart
      }
      SearchStockInfo(reqData).then( res => {
        this.stockProds = res.data;
      }).catch( error => console.log(error))
    },
    selectStock(val) {
        this.selectedProd = val;
    },
    // 打开冻结弹框
    openFreeze() {
        if (this.selectedProd.length == 0) {
            this.$message({
                message: '请选择要冻结的装备信息',
                type: "warning"
            })
        } else {
            this.openFreezeDialog = true;
        }
      
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
  }
</style>
  
